<template>
  <a-drawer
      title="导入题目"
      :width="width"
      placement="right"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose">
    <div v-if="!resultVisible">
      <a-row type="flex" align="middle" justify="center" style="height: 150px; border: 1px dotted #747474">
        <a-button type="primary" icon="download" @click="downloadTemplate">下载导入模板</a-button>
      </a-row>
      <a-upload-dragger
          name="file"
          :data="{ questionId: dataForm.questionId }"
          :headers="tokenHeader"
          :action="updateAction"
          @change="handleChange">
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">
          上传文件
        </p>
        <p class="ant-upload-hint">
          后缀名为xls、xlsx的 Excel 文件
        </p>
      </a-upload-dragger>
    </div>
    <div v-else>
      <a-row type="flex" justify="space-between">
        <a-space>
          <span>导入总数: {{ result.sum }}</span>
          <span>成功: {{ result.success }}</span>
          <span>失败: {{ result.fail }}</span>
        </a-space>
        <a-upload name="file" :data="{ questionId: dataForm.questionId }" :headers="tokenHeader" :action="updateAction" @change="handleChange">
          <a-button type="primary" icon="import">重新上传</a-button>
        </a-upload>
        <a-table ref="table" size="middle" bordered :columns="columns" :dataSource="dataList" style="margin-top: 20px;">
          <template slot="4" slot-scope="text, record">
            <span v-if="text === '0'" style="color: rgba(0, 112, 45, 1)">成功</span>
            <span v-else-if="text === '1'" style="color: rgba(212, 48, 48, 1)">失败，缺少必填项</span>
          </template>
        </a-table>
      </a-row>
      <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }">
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="onClose">
          保存
        </a-button>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'
import { ACCESS_TOKEN } from "@/store/mutation-types"

export default {
  name: "title-upload",
  data () {
    return {
      visible: false,
      resultVisible: false,
      width: 600,
      result: {},
      columns: [],
      dataList: [],
      updateAction: window._CONFIG['domianURL'] + '/dimension/uploadDimension',
      dataForm: {
        questionId: ''
      }
    }
  },
  computed: {
    //token header
    tokenHeader () {
      let head = { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) }
      return head;
    },
  },
  methods: {
    init () {
      this.visible = true
    },
    downloadTemplate () {
      var params = qs.stringify({
        'X-Access-Token': Vue.ls.get(ACCESS_TOKEN),
        'fileName': '导入题目模板.xlsx'
      })
      window.location.href = window._CONFIG['domianURL'] + `/dimension/downloadTemplate?${ params }`
    },
    handleChange (info) {
      const status = info.file.status;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        if (!info.file.response.success) {
          return this.$message.error(info.file.response.message)
        }
        this.$message.success(`${ info.file.name } 文件上传成功.`);
        this.resultVisible = true
        this.width = 800
        this.result = info.file.response.result
        this.result.detail[0].push('状态')
        let columns = this.result.detail.shift()
        for (let i = 0; i < columns.length; i++) {
          this.columns[i] = {
            title: columns[i],
            align: 'center',
            dataIndex: i,
            scopedSlots: { customRender: i },
          }
        }
        this.dataList = this.result.detail
        console.log('this.columns', this.columns)
        console.log('this.dataList', this.dataList)
        this.$emit("load")
      } else if (status === 'error') {
        this.$message.error(`${ info.file.name } 文件上传失败.`);
      }
    },
    afterVisibleChange () {
    },
    onClose () {
      this.visible = false
    },
  }
}
</script>

<style scoped>

</style>
